<template>
  <layout-body>
    <div>
      <el-button
        type="primary"
        v-permission="'store-goods_unit-create'"
        @click="createClick(0)"
      >
        <el-icon><Plus /></el-icon>
        添加单位
      </el-button>
    </div>
    <!-- 列表 -->
    <el-table v-loading="initLoading" class="mt20" :data="lists" row-key="id">
      <el-table-column label="单位名称" prop="unit_name">
        <template #default="scope">
          <span>{{ scope.row.unit_name }}</span>
        </template></el-table-column
      >
      <el-table-column align="center" label="排序" prop="sort">
        <template #default="scope">
          <span>{{ scope.row.sort }}</span>
        </template></el-table-column
      >
      <el-table-column label="创建时间" prop="create_time">
        <template #default="scope">
          <span class="text-grey fz12">{{ scope.row.create_time }}</span>
        </template></el-table-column
      >
      <el-table-column align="center" label="操作" width="120">
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="createClick(scope.row.id)"
            v-permission="'store-goods_unit-update'"
            >编辑</el-button
          >

          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="不用了"
            icon="WarningFilled"
            icon-color="red"
            title="确定删除吗？"
            @confirm="del(scope.row.id)"
          >
            <template #reference>
              <el-button
                link
                v-permission="'store-goods_unit-delete'"
                type="primary"
                >删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="flex end">
      <page :listPage="listPage" @change="pageChange"></page>
    </div>
    <storeGoodsUnitCreate ref="storeGoodsUnitCreateRef" @success="toInit"></storeGoodsUnitCreate>
  </layout-body>
</template>
<script lang="ts" setup>
import {
  getGoodsUnitList,
  delGoodsUnit,
} from "@/api/store/goods_unit";
import { listPageType, Result, ResultError } from "@/types";
import { ref, getCurrentInstance, onMounted } from "vue";
import storeGoodsUnitCreate from "./create.vue";
import { useConfig } from "@/store";
const configStore = useConfig();

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const storeGoodsUnitCreateRef = ref<HTMLElement>();

const createClick = (id: number) => {
  proxy?.$refs["storeGoodsUnitCreateRef"]?.open(id);
};

const initLoading = ref<boolean>(false);

const lists = ref<any>();

const listPage = ref<listPageType>({
  total: 0,
  limit: configStore.getPageLimit,
  page: 1,
});

const pageChange = (res: listPageType) => {
  listPage.value = res;
  toInit();
};

const toInit = () => {
  initLoading.value = true;
  let obj: any = {};
  obj.page = listPage.value.page;
  obj.limit = listPage.value.limit;
  getGoodsUnitList(obj)
    .then((res: Result) => {
      lists.value = res.data.data;
      listPage.value.total = res.data.total;
      setTimeout(() => {
        initLoading.value = false;
      }, 300);
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const del = (id: number) => {
  delGoodsUnit({
    id,
  })
    .then((res: Result) => {
      toInit();
      $utils.successMsg(res.message);
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};
onMounted(() => {
  toInit();
});
</script>